<template>
  <div>
    12321 {{ location }}
    <div>{{ state1 }}</div>
    <div>{{ state1.b }}</div>
    <button @click="refXg()">点击修改ref数据</button>
    <div>
      <p v-for="(item,index) in timer1.data" :key="index">
        <span>{{ item.balance_deal }}---ref--</span>
        <span>{{ item.aa }}---ref</span>
      </p>
      <button @click="xg()">点击</button>
    </div>
  </div>
</template>

<script lang="ts">
import {ref, onMounted, defineComponent, inject} from "vue";

export default defineComponent({
  name: "ref-syntax",
  setup(props, context) {
    const location = inject('key')
    onMounted(() => {
      console.log(location, '子获取值')
    })
    let state1 = ref<{ a?: number, b: number, c: boolean }>({b: 666, c: false})
    //方法的写法
    let refXg = () => {
      state1.value.c = !state1.value.c;
      state1.value.a = 123
    }
    const timer1 = ref<{ data: any, code: string, msg: string, suc: boolean }>({
      "code": "000",
      "msg": "成功",
      "data": [{
        "flg": 1,
        "deal_time": "2020-08-03 09:26:32",
        "balance_deal": "+100.00",
        "balance_id": 1,
      },
        {
          "flg": 0,
          "deal_time": "2020-07-31 17:24:01",
          "balance_deal": "-500.00",
          "balance_id": 1,
        },
        {
          "flg": 1,
          "deal_time": "2020-07-31 17:12:10",
          "balance_deal": "+1000.00",
          "balance_id": 1,
        }],
      "suc": true
    });
    let xg = () => {
      //点击按钮的时候，给数据中添加一个aa为false的属性
      timer1.value.data.forEach((v: any) => {
        v.aa = false;
      })
      context.$on('on-message', (e) => {
        alert(2)
        showMessage(e)
      })
      const showMessage = (test) => {
        alert(test)
        console.log(test)
      }
    }
    return {state1, refXg, timer1, xg, location}
  }
})

</script>

<style scoped>

</style>
